<template>
  <div>
    <div style="margin-top: 20px; margin-bottom: 30px">
      <!-- 轮播图 -->
      <Banner></Banner>
    </div>
    <el-container>
      <el-main>
        <!-- 翻页时钟 -->
        <fliper-clock></fliper-clock>
        <card-top-notice :noticeTop="announcementTop"></card-top-notice>
        <card-notice
          :noticeSystem="announcementSystem"
          :noticeTender="announcementTender"
        />
        <card-product-image :images="productImages" />
        <card-person
          v-for="item in managerInfo"
          :key="item.id"
          :user="item"
        ></card-person>
        <card-person
          v-for="item in purchaserInfo"
          :key="item.id"
          :user="item"
        ></card-person>
      </el-main>
      <el-aside style="width: 370px">
        <card-calendar> </card-calendar>
        <card-me class="me-area"></card-me>
        <card-tag :tags="tenderTags"></card-tag>
        <card-product :products="products"></card-product>
        <card-project
          cardHeader="招标项目"
          :projects="newProjects"
        ></card-project>
        <!-- <card-archive cardHeader="文章归档" :archives="archives"></card-archive>
        <card-article
          cardHeader="最新文章"
          :articles="newArticles"
        ></card-article> -->
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import Banner from "./Banner.vue";
import CardTag from "./card/CardTag";
import CardProduct from "./card/CardProduct";
import CardMe from "./card/CardMe";
import CardProject from "./card/CardProject";
import CardArchive from "./card/CardArchive";
import FlipClock from "./flipercard/FlipClock.vue";
import CardProductImage from "./card/CardProductImage.vue";
import CardNotice from "./card/CardNotice.vue";
import CardTopNotice from "./card/CardWeightNotice.vue";
import CardCalendar from "./card/CardCalendar.vue";
import CardPerson from "./card/CardPerson.vue";

// 获取最热标案类型
import {
  getHotTenderType,
  getHotTenderProduct,
  getNewTenderProject,
  listTopAnnouncement,
  listUser,
} from "@/api/home";
export default {
  name: "MainOne",
  components: {
    "card-me": CardMe,
    "card-project": CardProject,
    "card-tag": CardTag,
    "card-product": CardProduct,
    "card-product-image": CardProductImage,
    "card-notice": CardNotice,
    "card-top-notice": CardTopNotice,
    "card-calendar": CardCalendar,
    "card-person": CardPerson,
    CardArchive,
    Banner,
    "fliper-clock": FlipClock,
  },
  data() {
    return {
      selectDate: new Date(),
      tenderTags: [],
      products: [],
      productImages: [],
      newProjects: [],
      announcementSystem: [],
      announcementTender: [],
      announcementTop: [],
      managerInfo: [],
      purchaserInfo: [],
    };
  },
  created() {
    // 获取标案类型
    this.getTenderTags();
    // 获取采购产品需求
    this.getTenderProducts();
    this.getTenderProjects();
    this.getTopAnnouncement(0);
    this.getTopAnnouncement(1);
    this.getTopAnnouncement(2);
    // 获取 随机的三条 管理员/采购员 用户的信息
    this.getRandomUser(0);
    this.getRandomUser(1);
  },
  methods: {
    getTenderTags() {
      getHotTenderType()
        .then((res) => {
          console.log(res.data);
          this.tenderTags = res.data;
        })
        .catch((err) => {
          this.$message.warning("最近未签发标案！");
        });
    },
    getTenderProducts() {
      getHotTenderProduct()
        .then((res) => {
          console.log(res.data);
          this.products = res.data;
          this.productImages = res.data.map((p) => p.imageUrl);
        })
        .catch((err) => {
          this.$message.warning("最近未有新的采购需求！");
        });
    },
    getTenderProjects() {
      getNewTenderProject()
        .then((res) => {
          console.log(res.data);
          this.newProjects = res.data;
        })
        .catch((err) => {
          this.$message.warning("最近未有新的招标项目！");
        });
    },
    getTopAnnouncement(type) {
      listTopAnnouncement({ type: type })
        .then((res) => {
          console.log(res.data);
          if (type === 1) this.announcementSystem = res.data;
          else if (type === 2) this.announcementTender = res.data;
          else this.announcementTop = res.data;
        })
        .catch((err) => {
          this.$message.warning("最近未有新的公告！");
        });
    },
    getRandomUser(type) {
      listUser({ type: type })
        .then((res) => {
          if (type === 0) this.managerInfo = res.data;
          else if (type === 1) this.purchaserInfo = res.data;
        })
        .catch((err) => {
          this.$message.warning("优秀员工获取失败！");
        });
    },
  },
};
</script>

<style scoped>
.el-container {
  width: 1020px;
}

.el-aside {
  margin-left: 15px;
  width: 370px;
  background: transparent;
}

.el-main {
  padding: 0px;
  line-height: 16px;
}

.el-card {
  border-radius: 0;
}

.el-card:not(:first-child) {
  margin-top: 20px;
}
</style>